* {
    margin: 0;
    padding: 0;
}

body {

    background-color: #f3f5f7;
}

.clearfix:after{
    content:"";
    display: block;
    height: 0;             /*   清除浮动  类名是clearfix ， 以后那个盒子需要 清除浮动带来的影响，就可以调用这个类*/
    clear: both;
    visibility: hidden;
}
.clearfix{
    *zoom:1;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.w {
    width: 1200px; /*  宽度定死，高度自定义*/
    margin: auto; /* 这是页面的版心 以后哪个盒子需要版心调用w类即可*/
}

.header {
    height: 42px;
    margin: 30px auto;
    /*  在头部盒子里面，需要一个上下边距，居中不变，
                              涉及到 css的层叠性，会覆盖上面的w 类的属性*/
}
input{
    outline: none;/*  去除表单 边框自带的颜色*/
}
.logo {
    float: left;
    width: 198px;
    height: 42px;

}

.nav {
    float: left;
    margin-left: 60px;
}

.nav ul li {
    float: left;
    margin: 0 15px;
}

.nav ul li a {
    display: block;
    height: 42px; /*  给a增加高度是为了提升用户体验，这样文字周围的区域点击时也会有效果*/
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;

}

.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff; /*  鼠标经过时文字添加下边框和文字变色*/
}

/* 搜索模块*/
.search { /*  搜索模块的盒子*/
    float: left; /*左浮动*/
    width: 412px;
    height: 42px;
    margin-left: 70px;
}

.search input {
    float: left; /*设置左浮动*/
    width: 345px; /* 设置输入框的宽高*/
    height: 40px; /**/
    border: 1px solid #00a4ff; /*  设置边框*/
    border-right: 0px; /* 除去右边框*/
    color: #bfbfbf; /*设置文本颜色*/
    font-size: 14px; /* 文本大小*/
    padding-left: 15px; /* 文本距离输入框的左边距，用内边距来挤压*/
}

.search button {
    float: left;
    width: 50px;
    height: 42px;
    background: url("image/xc5.png"); /* 设置一个按钮 ，引入背景图片 ，点击图片就是点击按钮*/
    border: 0; /* 去除按钮自带边框*/
}

/* 头像部分*/
.user {

    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
}


/*banner 区域开始了*/
.banner { /* 设置了一个banner 大盒子。只设置高度。宽度已经在w类里面设置好了，直接调用 在 标签里面添加一个 w 类即可*/
    height: 421px;
    background-color: #1c036c;
}

.banner .w {
    height: 421px;
    background: url("image/xc3.png") no-repeat top center;
}

.subnav { /* 侧边栏 */
    float: left;
    width: 190px;
    height: 421px;
    background: rgba(0, 0, 0, .3);

}

.subnav ul li { /* 侧边栏里面的内容*/
    height: 45px; /*设置高度，为了增加用户体验，也可以使文字垂直居中*/
    line-height: 45px;
    padding: 0px 20px; /* 设置左右边距20   因为没有设置 li 的宽度，所以不会撑大盒子*/
}

.subnav ul li a {
    font-size: 14px; /*  侧边栏里面字体的样式*/
    color: #fff;


}

.subnav ul li a:hover { /* 侧边栏鼠标经过的样式*/
    color: gold;
}

.subnav ul li a span {
    float: right; /* 侧边栏 右边的小箭头*/
}

.course { /*  右侧边栏 课表*/
    float: right;
    width: 230px;
    height: 300px;
    background-color: white;
    margin-top: 20px; /* 距离上面的距离 ，使用外边距*/
}

.course h2 { /*  第一行 就是大盒子里面 第一个小盒子*/
    height: 48px;
    background-color: #9bceea;
    line-height: 48px; /*  垂直居中*/
    text-align: center; /*水平居中*/
    color: white;

}

.bd { /*  li的盒子 就是侧边栏盒子 的第二个盒子*/
    padding: 0 20px; /* 上下内边距0  左右内边距20 */
}

.bd ul li {
    padding: 15px 0; /*  给li里面的内容添加 上下边距，左右边距是0*/
    border-bottom: 1px solid #a6a6a6; /*  设置下边框 */

}

.bd ul li h4 {
    font-size: 16px; /*  li 里面的内容 分为 h4 和 p*/
    color: #4e4e4e
}

.bd ul li p {
    font-size: 12px;
    color: #a5a5a5;
}

.bd .more { /*  大盒子里面的第三个盒子*/
    display: block;
    height: 38px;
    border: 1px solid #00a4ff; /* 设置边框*/
    margin-top: 5px; /* 设置上边距*/
    color: #00a4ff;
    font-size: 16px;
    font-weight: bold; /* 字体加粗*/
    text-align: center; /*水平居中*/
    line-height: 38px; /* 垂直居中*/
}

/*竞品推荐模块*/
.good { /*给一个商品大盒子 */
    height: 60px; /* 设置高度，宽度是w 类已经定好，直接调用就可以*/
    background-color: #fff; /* 设置背景颜色*/
    box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, .1); /*设置阴影*/
    margin-top: 10px; /* 设置上边距 */
    line-height: 60px; /*行高会继承给三个孩子*/
}

.good h3 { /* 给 大盒子里面的第一个小盒子 添加样式 */
    float: left; /*左浮动*/
    margin-left: 30px; /*左边距30 */
    color: #00a4ff; /*设置字体颜色*/
    font-size: 16px; /*设置字体大小*/
}

.good ul {
    float: left;
    margin-left: 30px; /* 为了让精品推荐盒子 和 ul 盒子有 一定的距离   ， 添加了左边距 30*/
}

.good ul li {
    float: left; /*  浮动*/
}

.good ul li a {
    padding: 0 30px; /*  给 a 标签里的内容 添加左右边距30，上下边距为0.*/
    font-size: 16px; /*设置字体大小*/
    color: #050505; /* 设置字体颜色*/
    border-left: 1px solid #ccc; /*  用左边框的形式来设计 分隔开的竖线*/
}

.good .mod {
    float: right; /*   让修改 的小盒子 右浮动*/
    margin-right: 30px; /*  添加右 外边距30*/
    color: #00a4ff;
    font-size: 14px;
}

.good ul li a:hover {
    color: #00a4ff;
}

/*  box部分 开始*/
.box {
    margin-top: 30px; /*让最大的box盒子距离上面的盒子30 边距*/
}

.box-bh {
    height: 45px; /* box里面的头部盒子浮动了之后 ， */
    overflow: hidden;
}

.box-bh h3 {
    float: left; /*精品推荐字 左浮动 设置样式*/
    font-size: 20px;
    color: #494949
}

.box-bh a {
    float: right; /* 右边 修改 字 右浮动 ，设置样式*/
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px; /*上边距10，右边距30*/
    margin-right: 30px;
}
.box-bd ul{        /*因为给小li设置了右边距，导致底层父盒子宽度不够，所以小li 会掉下去。
                    因此给 小li的父亲ul 添加刚好的宽度*/
    width: 1225px;

}
.box-bd ul li{
    position: relative;   /*  子绝父相，为了给图片添加一个hot标志，需要给父元素添加相对定位*/
    float: left;/*给每一个小li 设置左浮动*/
    width: 228px;/**/
    height: 270px;/**/
    background-color: #fff;/**/
    margin-right: 15px;/**//* 给每一个小li设置右边距*/
    margin-bottom: 15px;/*给每一个小li设置下边距*/
    transition: all 0.5s;/* 给每一个小li添加了浮动*/

}
.box-bd ul li >img{
    width: 100%;     /*  图片的宽高等于小li的宽高*/
}
.box-bd ul li:hover{
    transform: scale(1.1);/* 添加了图片放大的效果，*/
}
.box-bd ul li h4{
    margin: 20px 20px 20px 25px; /* 设置h4标题的边距*/
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box-bd ul li em{
    position: absolute;/*  子绝父相， 给子元素添加绝对定位*/
    top: 4px;
    right: -4px;
}
.box-bd ul li .info{
    margin: 0px 20px 0px 25px;   /* 设置div里面的边距*/
    font-size: 12px;
    color:#999;
}
.box-bd ul li .info span{  /*span单独 设置颜色*/
    color: #ff8500;
}



/* 尾部区域开始*/
.footer{
    height: 415px;
    background-color: #fff;
}
.footer .w{
    padding-top: 35px;  /* 给版心盒子设置一个内边距，让文字内容往下。不用外边距是因为会出现
                          外边距塌陷，因为footer盒子不是浮动的，而且版心盒子也不是浮动的*/
}
.copyright{
    float: left;          /*footer 里面的内容  分为左边和 右边两大部分，
                            copyright是左边的部分，给左边的盒子添加一个左浮动 */

}
.copyright p{
    font-size: 12px;
    color: #666;
    margin: 20px 0px 15px 0px;
}
.copyright .app{        /* 下载链接*/
    display: block;         /* 用a标签来做的 ，a便签是行内标签，没有办法设置宽高，
                             所以要用display 设置为块级元素*/
    width: 118px;       /**/
    height: 33px;       /**/
    border: 1px solid #00a4ff;      /* 给a 链接里面的内容添加一个边框*/
    line-height: 33px;
    text-align: center;
    font-size: 16px;
    color: #00a4ff;
}
.links{
    float: right;    /*  *footer 里面的内容  分为左边和 右边两大部分，
                            links是右边的部分，给右边的盒子添加一个右浮动 */
}
.links dl {
    float: left;
    margin-left: 100px;
}
.links dl dt{
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}
.links dl  dd a{
    color: #333;
    font-size: 12px;
}
.links dl  dd a:hover{
    color: #00a4ff;
}